<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">15-axios-网络请求</title>
</head>

<body>

	<div id="app1" class="capp1">
		<input type="button" value="获取笑话" id="getJokes">
		<input type="button" value="注册名字" id="regName">
		<hr><hr>
		<h2>axios 的get或者post方法，then的第一个回调函数是成功，第二个是失败</h2>
		<hr><hr>
		<ul>
			<li v-for=" item in jstr ">
				{{ item }}
			</li>
		</ul>
	</div>
	<span id="sp1"></span>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

	<script>
		var data = {
			jstr: null
		}
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el: "#app1",
			data: data,
			mounted() {

			},

		})

		document.querySelector('#getJokes').onclick = function getJokes() {
			// axios 的get或者post方法，then的第一个回调函数是成功，第二个是失败
			axios
				.get('https://autumnfish.cn/api/joke/list?num=4')
				.then(res => (
					data.jstr = res.data.jokes
					// console.log()
				), function (err) {
					alert(err)
				})
				// .then(response => (this.jstr = response.data.sites))
				.catch(function (e) {
					console.log(e)
				});
		}
		document.querySelector('#regName').onclick = function getJokes() {
			axios.post('https://autumnfish.cn/api/user/reg', { username: 'Site Li' })
				.then(res => alert("注册结果：" + res.data)
				,function(err){
					alert(err)
				})
				.catch(function (e) {
					alert(e)
				});
		}

	</script>

</body>

</html>